<template>
  <h1 class="borderh1">默认调用</h1>
  <br><br><br>
  <Uploader />
  <br><br><br>
  <h1 class="borderh1">自定义调用</h1>
  <br><br><br>
  <Uploader @success="handleSuccess" @error="handleError">
    <!-- 自定义触发区域 -->
    <template #trigger>
      <div class="custom-trigger">
        <svg class="upload-icon" viewBox="0 0 24 24">
          <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
        </svg>
        <span>选择文件</span>
      </div>
    </template>

    <!-- 自定义文件列表 -->
    <template #fileList="{ files, removeFile }">
      <ul class="custom-file-list">
        <li v-for="(fileInfo, index) in files" :key="index" class="file-item">
          <span class="file-name">{{ fileInfo.file.name }}</span>
          <div v-if="fileInfo.progress > 0" class="progress-container">
            <div class="progress-bar" :style="{ width: `${fileInfo.progress}%` }"></div>
            <span class="progress-text">{{ Math.round(fileInfo.progress) }}%</span>
          </div>
          <button v-if="fileInfo.progress < 100" @click="removeFile(index)" class="remove-button">
            删除
          </button>
          <span v-else class="complete-icon">✓</span>
        </li>
      </ul>
    </template>

    <!-- 自定义操作按钮 -->
    <template #actions="{ uploadFiles, files, uploading }">
      <button @click="uploadFiles" :disabled="files.length === 0 || uploading" class="upload-button">
        {{ uploading ? '上传中...' : '开始上传' }}
      </button>
    </template>
  </Uploader>
</template>

<script setup>
definePageMeta({
  layout: 'minimal',
  showHeader: false
});
const handleSuccess = (files) => {
  console.log('上传成功:', files);
  alert(`成功上传 ${files.length} 个文件`);
};

const handleError = (error) => {
  console.error('上传失败:', error);
  alert('上传失败: ' + error.message);
};
</script>

<style scoped>
/* 自定义触发区域样式 */
.custom-trigger {
  border: 2px dashed #ccc;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 16px;
  background-color: #f8fafc;
}

.custom-trigger:hover {
  border-color: #409eff;
  background-color: #f0f7ff;
}

.upload-icon {
  width: 24px;
  height: 24px;
  fill: #409eff;
  margin-bottom: 8px;
}

/* 自定义文件列表样式 */
.custom-file-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.3s;
}

.file-item:hover {
  background-color: #f9fafb;
}

.file-item:last-child {
  border-bottom: none;
}

.file-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 16px;
  font-size: 14px;
  color: #333;
}

.progress-container {
  width: 120px;
  height: 20px;
  background-color: #f3f3f3;
  border-radius: 4px;
  position: relative;
  margin-right: 16px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: #409eff;
  transition: width 0.3s;
}

.progress-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: white;
}

.remove-button {
  background: none;
  border: 1px solid #f56c6c;
  color: #f56c6c;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 13px;
}

.remove-button:hover {
  background-color: #f56c6c;
  color: white;
}

.complete-icon {
  color: #67c23a;
  font-weight: bold;
  margin-left: 16px;
  font-size: 16px;
}

/* 自定义操作按钮样式 */
.upload-button {
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
  font-weight: 500;
}

.upload-button:hover {
  background-color: #66b1ff;
}

.upload-button:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}

/* 标题样式 */
.borderh1 {
  border-bottom: 2px solid #409eff;
  border-top: 2px solid #409eff;
  padding: 10px 0;
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
  text-align: center;
  background-color: #f0f7ff;
}
</style>